<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    default: () => 1
  },
  min: {
    type: Number,
    default: () => 1
  },
  max: {
    type: Number,
    default: () => 100
  },
  step: {
    type: Number,
    default: () => 1
  },
  disabled: {
    type: Boolean,
    default: () => false
  }
})

const inputValue = ref(props.modelValue ? props.modelValue : '')

const emit = defineEmits(['update:modelValue'])

const change = () => {
  emit('update:modelValue', inputValue.value)
}

watch(
  () => props.modelValue,
  (val) => {
    inputValue.value = val
  }
)
</script>

<template>
  <el-input-number
    v-model="inputValue"
    class="!w-full"
    :min="props.min"
    :max="props.max"
    :step="props.step"
    :disabled="props.disabled"
    controls-position="right"
    @change="change"
  />
</template>

<style lang="scss" scoped></style>
